<template>
	<view class="pad20T pad100B clearfix overflow-x-hidden">
		<view class="content">
			<lyg-popup @popupState="popupState" title="服务协议" protocolPath='../webview/webview?can_share=false&url=/hybrid/html/protocol.html'
			 policyPath='../webview/webview?can_share=false&url=/hybrid/html/policy.html' policyStorageKey="has_read_privacy"></lyg-popup>
		</view>
		
		<u-keyboard mode="card" v-model="show4card" :mask="false" @change="valChange" @backspace="backspace">
		</u-keyboard>
		<uni-steps active-color="#f83d38"
			:options="[{title: '保费试算'}, {title: '补充资料'}, {title: '身份验证'}]"
			:active="1"></uni-steps>

		<uni-forms :value="formData" ref="form">
			<uni-section class="pub-title" title="会员信息" type="line"></uni-section>
			<uni-card :isShadow="true">
				<uni-forms-item label="姓" name="xing" required>
					<uni-easyinput type="text" v-model="formData.xing" placeholder="请输入姓" :inputBorder="true" />
				</uni-forms-item>
				<uni-forms-item label="名" name="ming" required>
					<uni-easyinput type="text" v-model="formData.ming" placeholder="请输入名" :inputBorder="true" />
				</uni-forms-item>
				<uni-forms-item label="手机号码" required name="mobile">
					<uni-easyinput type="text" v-model="formData.mobile" placeholder="请输入手机号码" :inputBorder="true" />
				</uni-forms-item>
				<uni-forms-item label="身份证号" required name="zhengjhm">
					<uni-easyinput type="text" v-model="formData.zhengjhm" placeholder="请输入身份证号" :inputBorder="true"
						@iconClick="showKeyboard('card')" suffixIcon="gear" />
				</uni-forms-item>
				<uni-forms-item label="省市地区" required name="area">
					<uni-data-picker :localdata="items" popup-title="请选择省市地区" @change="onchange" @popupopened="popupopened" @popupclosed="popupclosed"></uni-data-picker>
				</uni-forms-item>
				<uni-forms-item label="详细地址" required name="address">
					<uni-easyinput type="text" v-model="formData.address" placeholder="请输入地址" :inputBorder="true" />
				</uni-forms-item>
				<uni-forms-item label="电子邮箱" required name="email">
					<uni-easyinput type="text" v-model="formData.email" placeholder="接收电子保单用" :inputBorder="true" />
				</uni-forms-item>
			</uni-card>
			<uni-section class="pub-title" title="车辆信息" type="line"></uni-section>
			<uni-card class="box-shadow-10 card-pub" :isShadow="true">
				<uni-forms-item label="车牌号" name="cheph">
					<uni-easyinput type="text" v-model="formData.cheph" placeholder="请输入车牌号" :inputBorder="true" disabled="true"/>
				</uni-forms-item>
				<uni-forms-item label="车架号" name="chejh" required>
					<uni-easyinput type="text" v-model="formData.chejh" placeholder="请输入车架号" :inputBorder="true" />
				</uni-forms-item>
				<uni-forms-item label="发动机号" name="fadjh" required>
					<uni-easyinput type="text" v-model="formData.fadjh" placeholder="请输入发动机号" :inputBorder="true" />
				</uni-forms-item>
				<uni-forms-item label="使用性质" name="shiyxz">
					<picker @change="bindPickerChange" :value="shiyxzIndex" :range="shiyxzList" range-key="itemText">
						<view class="uni-input">{{ shiyxzList[shiyxzIndex].itemText }}</view>
					</picker>
				</uni-forms-item>
			</uni-card>
			<uni-section class="pub-title" title="核保照片" type="line"></uni-section>
			<uni-card :isShadow="true">
				<uni-forms-item label="行驶证" required>
					<u-upload width="160" height="160" max-count="1" :action="action" :header="header"
						@on-success="onSuccess"></u-upload>
				</uni-forms-item>
				<uni-forms-item label="仪表盘" required>
					<u-upload width="160" height="160" max-count="1" :action="action" :header="header"
						@on-success="onSuccess2"></u-upload>
				</uni-forms-item>
			</uni-card>

		</uni-forms>

		<button @click="submitForm" class="btn-red bottom-btn border-no">身份验证</button>

	</view>
</template>

<script>
	import lyg_popup from '@/components/lyg-popup/lyg-popup.vue'
	import {mapMutations} from 'vuex'
	
	export default {
		components: {
			lyg_popup
		},
		data() {
			return {
				province: null,
				city: null,
				county: null,
				items: [],
				shiyxzIndex: 0,
				shiyxzList: [],
				xingsz: "",
				yibp: "",
				header: {
					"X-Access-Token": uni.getStorageSync("token")
				},
				action: getApp().globalData.serviceUrl + "/sys/common/upload",
				show4card: false,
				show4car: false,
				formData: {
					xing: uni.getStorageSync("toubrxx").xing,
					ming: uni.getStorageSync("toubrxx").ming,
					mobile: uni.getStorageSync("userInfo").phone,
					email: uni.getStorageSync("toubrxx").email,
					address: uni.getStorageSync("toubrxx").address,

					chejh: uni.getStorageSync("carInfo").vin,
					zhengjhm: uni.getStorageSync("toubrxx").zhengjhm == null ? "" : uni.getStorageSync("toubrxx").zhengjhm,
					cheph: uni.getStorageSync("carInfo").cheph == null ? "" : uni.getStorageSync("carInfo").cheph,
					fadjh: uni.getStorageSync("carInfo").fadjh,
				},
			}
		},

		onLoad() {
			let that = this

			uni.request({
				url: getApp().globalData.serviceUrl + "/sys/dictItem/list",
				data: {
					dictId: "1450629979404001282",
				},
				dataType: 'json',
				method: 'GET',
				success: (result) => {
					if (result.data.success) {
						that.shiyxzList = result.data.result.records
					}
				}
			})
			
			uni.request({
				url: getApp().globalData.serviceUrl + "/order/kuybOrder/getShengsqxData",
				data: {
				},
				header: {
					"X-Access-Token": uni.getStorageSync("token")
				},
				method: 'GET',
				success: (resp) => {
					if (resp.data.success) {
						that.items = resp.data.result
					} 
				}
			})
			
			
		},

		onUnload() {
			// wx.navigateTo({
			// 	url: '/pages/baofShis/baofShis'
			// })
		},

		methods: {
			popupState(state) {
				console.log(state);
				if(state == false) {
					uni.switchTab({
						url: '/pages/home/home'
					})
				}
			},
						
			popupopened() {
				console.log("弹出")
			},
			
			popupclosed() {
				console.log("关闭")
			},
			
			onchange(e) {
				const value = e.detail.value
				
				this.province = value[0].text
				this.city = value[1].text
				this.county = value[2].text
			},
			
			bindPickerChange: function(e) {
				this.shiyxzIndex = e.target.value
			},

			onSuccess(data, index, lists, name) {
				if (data.success)
					this.xingsz = data.message
			},

			onSuccess2(data, index, lists, name) {
				if (data.success)
					this.yibp = data.message
			},

			// 按键被点击(点击退格键不会触发此事件)
			valChange(val) {
				// 将每次按键的值拼接到value变量中，注意+=写法
				this.formData.zhengjhm += val;
				console.log(this.value);
			},
			// 退格键被点击
			backspace() {
				// 删除value的最后一个字符
				if (this.formData.zhengjhm.length)
					this.formData.zhengjhm = this.formData.zhengjhm.substr(0, this.formData.zhengjhm.length - 1);

			},

			showKeyboard(type) {
				if (type == "card")
					this.show4card = true
				else
					this.show4car = true
			},

			submitForm: function(form) {
				let that = this

				this.$refs.form.validate().then(res => {
					if (res.xing == null || res.ming == null || res.xing == "" || res.ming == "") {
						uni.showToast({
							title: '姓名必填!',
							icon: 'none'
						});
						return
					}
					
					if (res.mobile == null || res.mobile == "") {
						uni.showToast({
							title: '手机必填!',
							icon: 'none'
						});
						return
					}
					
					if (res.zhengjhm == null || res.zhengjhm == "") {
						uni.showToast({
							title: '身份证必填!',
							icon: 'none'
						});
						return
					}
					
					if(that.province == null || that.province == "") {
						uni.showToast({
							title: '省市地区必填!',
							icon: 'none'
						});
						return
					}
					
					if (res.address == null || res.address == "") {
						uni.showToast({
							title: '详细地址必填!',
							icon: 'none'
						});
						return
					}
					
					if (res.email == null || res.email == "") {
						uni.showToast({
							title: '邮箱必填!',
							icon: 'none'
						});
						return
					}

					if (res.chejh == null || res.chejh == "") {
						uni.showToast({
							title: '车架号必填!',
							icon: 'none'
						});
						return
					}

					if (res.fadjh == null || res.fadjh == "") {
						uni.showToast({
							title: '发动机号必填!',
							icon: 'none'
						});
						return
					}
					
					// if (this.xingsz == "") {
					// 	uni.showToast({
					// 		title: '请上传行驶证照片!',
					// 		icon: 'none'
					// 	});
					// 	return
					// }

					// if (this.yibp == "") {
					// 	uni.showToast({
					// 		title: '请上传仪表盘照片!',
					// 		icon: 'none'
					// 	});
					// 	return
					// }

					let toubrxx = {}
					toubrxx.xing = res.xing
					toubrxx.ming = res.ming
					toubrxx.name = res.xing + res.ming
					toubrxx.mobile = res.mobile
					toubrxx.zhengjhm = res.zhengjhm
					toubrxx.email = res.email
					toubrxx.xingsz = this.xingsz
					toubrxx.yibp = this.yibp
					toubrxx.province = this.province
					toubrxx.city = this.city
					toubrxx.province = this.province
					toubrxx.county = this.county
					toubrxx.address = res.address
					uni.setStorageSync("toubrxx", toubrxx)

					let carInfo = uni.getStorageSync("carInfo")
					carInfo.vin = res.chejh
					carInfo.fadjh = res.fadjh
					carInfo.shiyxz = this.shiyxzList[this.shiyxzIndex].itemValue
					uni.setStorageSync("carInfo", carInfo)

					uni.redirectTo({
						url: '../../pages2/shenfyz/shenfyz'
					})


				}).catch(err => {
					uni.showToast({
						title: err.errorMessage,
						icon: 'none'
					});
				})
			}
		}
	}
</script>

<style scoped>
.uni-border{position:none;z-index:0 !imporant}
</style>
